<template>
  <div class="login-words">
    <div class="loging-box">
      <div class="logo">中心</div>
      <el-form class="el-s" ref="form" :model="form" >
        <el-form-item>
          <el-input v-model.trim="form.username" placeholder="请输入用户名"><i slot="prefix" class="el-icon-user-solid"></i></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="form.password" placeholder="请输入密码"> <i slot="prefix" class="el-icon-camera-solid"></i></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="butt" type="primary" @click="thelogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    async thelogin(){
    const res = await this.$store.dispatch("login",this.form)
    this.$router.push('/index');
    } 
  },
};
</script>
<style lang="scss" scoped>
.login-words {
  height: 100%;
  background: url("https://cloud.axureshop.com/gsc/ZYSFNW/00/3f/73/003f7321b2754a56b503381218ab3c66/images/%E7%99%BB%E5%BD%95/u1_state0.png?token=3fe2e5f38f7385c2db17607095969ddede9ccf53fec00f2a8f95833d67780c51")
    dodgerblue no-repeat right center;
  background-size: 450px 550px;
}
.loging-box {
  background-color: #ffff;
  width: 350px;
  height: max-content;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 40px;
}
.logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: dodgerblue;
  text-align: center;
  line-height: 60px;
  margin: 0 auto;
}
.butt{
  width: 100%;
}
.el-s{
  margin: 20px 0 70px 0;
}
</style>